<template>
  <div class="SoftwareSettings">
    <el-tabs
      tab-position="left"
      class="el-tabs-redefine"
      v-model="editableTabsValue"
      type="border-card"
      @tab-click="tabClick"
    >
      <el-tab-pane label="系统名称设置" name="first">
        <div class="card-item">
          <div class="card-content">
            <div class="content-row">
              <el-form
                ref="systemForm"
                :model="systemForm"
                :rules="systemFormRules"
                label-width="100px"
              >
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="系统名称:" prop="name">
                      <el-input
                        size="mini"
                        placeholder="请输入系统名称"
                        v-model="systemForm.name"
                        maxlength="15"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="系统区域:" prop="area">
                      <el-input
                        size="mini"
                        placeholder="请输入系统区域"
                        v-model="systemForm.area"
                        maxlength="15"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 15px;">
                  <el-col :span="24">
                    <el-form-item label="系统图标:" prop="imageUrl">
                      <el-upload
                        class="avatar-uploader"
                        :action="uploadUrl"
                        list-type="picture-card"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :on-error="uploadImageFail"
                      >
                        <img v-if="systemForm.imageUrl" :src="systemForm.imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label>
                      <el-button size="mini" @click="saveLogoAndSysName">保存</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="系统基本信息" name="second">
        <div class="card-item">
          <div class="card-content">
            <div class="content-row">
              <el-row>
                <el-col :span="24">
                  <span class="content-item-title">web版本:</span>
                  <span class="content-item-text">0</span>
                </el-col>
              </el-row>
            </div>
            <div class="content-row">
              <el-row>
                <el-col :span="24">
                  <span class="content-item-title">LER3000A版本:</span>
                  <span class="content-item-text">0</span>
                </el-col>
              </el-row>
            </div>
            <div class="content-row">
              <el-row>
                <el-col :span="24">
                  <span class="content-item-title">数据库模型版本:</span>
                  <span class="content-item-text">0</span>
                </el-col>
              </el-row>
            </div>
            <div class="content-row">
              <el-row>
                <el-col :span="24">
                  <span class="content-item-title">机器人下位机版本:</span>
                  <span class="content-item-text">0</span>
                </el-col>
              </el-row>
            </div>
            <div class="content-row">
              <el-row>
                <el-col :span="24">
                  <span class="content-item-title">模式识别版本:</span>
                  <span class="content-item-text">0</span>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="远程访问设置" name="third">
        <!-- <div class="operation">
          <el-button size="mini">新增远程信息</el-button>
        </div>-->
        <div class="card-item">
          <div class="card-content">
            <div class="content-row">
              <el-form ref="form" label-width="120px">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="可见光ip地址:">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="visibleLigth.ip"
                        oninput="value=value.replace(/[^0-9.]/g,'')"
                        maxlength="30"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="可见光端口:">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="visibleLigth.port"
                        maxlength="30"
                        oninput="value=value.replace(/[^0-9.]/g,'')"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="可见光账号:">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="visibleLigth.account"
                        maxlength="30"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="可见光密码:">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="visibleLigth.password"
                        maxlength="30"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-row>
                  <el-col :span="24">
                    <el-form-item label="可见光H5protocol">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="visibleLigth.protocol"
                        maxlength="30"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="可见光H5ip地址">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="visibleLigth.H5_ip"
                        maxlength="30"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="可见光H5token">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="visibleLigth.token"
                        maxlength="50"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="可见光H5session">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="visibleLigth.session"
                        maxlength="50"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>-->
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="webrtc-address">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="webrtcAddress"
                        maxlength="50"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="rtsp-address">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="rtspAddress"
                        maxlength="100"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="Roslibjs ip地址:">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="visibleLigth.roslibjs_ip"
                        oninput="value=value.replace(/[^0-9.]/g,'')"
                        maxlength="30"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="Roslibjs 端口:">
                      <el-input
                        size="mini"
                        placeholder="请输入内容"
                        v-model="visibleLigth.roslibjs_port"
                        maxlength="30"
                        oninput="value=value.replace(/[^0-9.]/g,'')"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label>
                      <el-button size="mini" @click="saveVisibleLigthParams">保存</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="坐标设置" name="fourthly">
        <div class="card-item">
          <div class="card-content">
            <div class="content-row">
              <el-form
                ref="systemForm"
                :model="systemPoint"
                :rules="systemPointRules"
                label-width="100px"
              >
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="装载点坐标:"></el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="x:" prop="name">
                      <el-input
                        size="mini"
                        oninput="value=value.replace(/[^0-9.-]/g,'')"
                        placeholder="请输入x轴坐标"
                        v-model="systemPoint.home_x"
                        maxlength="15"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="y:" prop="area">
                      <el-input
                        size="mini"
                        oninput="value=value.replace(/[^0-9.-]/g,'')"
                        placeholder="请输入y轴坐标"
                        v-model="systemPoint.home_y"
                        maxlength="15"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="z:" prop="area">
                      <el-input
                        size="mini"
                        oninput="value=value.replace(/[^0-9.-]/g,'')"
                        placeholder="请输入z轴坐标"
                        v-model="systemPoint.home_z"
                        maxlength="15"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="Back坐标:"></el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="x:" prop="name">
                      <el-input
                        size="mini"
                        oninput="value=value.replace(/[^0-9.-]/g,'')"
                        placeholder="请输入x轴坐标"
                        v-model="systemPoint.back_x"
                        maxlength="15"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="y:" prop="area">
                      <el-input
                        size="mini"
                        oninput="value=value.replace(/[^0-9.-]/g,'')"
                        placeholder="请输入y轴坐标"
                        v-model="systemPoint.back_y"
                        maxlength="15"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="z:" prop="area">
                      <el-input
                        size="mini"
                        oninput="value=value.replace(/[^0-9.-]/g,'')"
                        placeholder="请输入z轴坐标"
                        v-model="systemPoint.back_z"
                        maxlength="15"
                      ></el-input>
                      <span class="content-item-icon">*</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label>
                      <el-button size="mini" @click="saveLocationParams">保存</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  filesUpload,
  systemSettings,
  systemSettingsBatch,
  postOperationLogs,
  robotParams,
  robotParamsBatch
} from "@/api/apiManagement";
import { getToken } from "@/utils/auth";
import { parse } from "path";

export default {
  data() {
    return {
      robot_id: null,
      editableTabsValue: "first",
      uploadUrl: process.env.UPLOAD_URL + "/ui/files",
      uploadHeader: {
        token: ""
      },
      systemForm: {
        name: "",
        area: "",
        imageUrl: ""
      },
      systemPoint: {
        home_x: 0,
        home_y: 0,
        home_z: 0,
        back_x: 0,
        back_y: 0,
        back_z: 0
      },
      visibleLigth: {
        ip: "",
        port: "",
        account: "",
        password: "",
        protocol: "",
        H5_ip: "",
        token: "",
        session: "",
        roslibjs_ip: "",
        roslibjs_port: ""
      },
      systemFormRules: {
        name: [{ required: true, trigger: "blur", message: "请输入系统名字" }],
        area: [{ required: true, trigger: "blur", message: "请输入系统区域" }],
        imageUrl: [
          { required: true, trigger: "blur", message: "请上传系统图标" }
        ]
      },
      systemPointRules: {},
      kurento: {
        wsuri: "",
        rtsp: ""
      },
      rtspAddress: "",
      webrtcAddress: ""
    };
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    this.uploadHeader.token = getToken();
    this.get_systemSettings();
  },
  mounted() {},
  methods: {
    getRobotParams(type) {
      var parm = {
        page: 1,
        size: 0,
        robotId: this.robot_id,
        type: type
      };
      robotParams(parm)
        .then(response => {
          if (response.list && response.list.length > 0) {
            console.log("*******", response);
            for (var i = 0, len = response.list.length; i < len; i++) {
              if (response.list[i].name === "charge_house_x") {
                this.systemPoint.home_x = response.list[i].value;
              }
              if (response.list[i].name === "charge_house_y") {
                this.systemPoint.home_y = response.list[i].value;
              }
              if (response.list[i].name === "charge_house_z") {
                this.systemPoint.home_z = response.list[i].value;
              }
              if (response.list[i].name === "back_point_x") {
                this.systemPoint.back_x = response.list[i].value;
              }
              if (response.list[i].name === "back_point_y") {
                this.systemPoint.back_y = response.list[i].value;
              }
              if (response.list[i].name === "back_point_z") {
                this.systemPoint.back_z = response.list[i].value;
              }

              if (response.list[i].name === "visible_light_ip") {
                this.visibleLigth.ip = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_port") {
                this.visibleLigth.port = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_account") {
                this.visibleLigth.account = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_password") {
                this.visibleLigth.password = response.list[i].value;
              }

              if (response.list[i].name === "visible_light_h5_protocol") {
                this.visibleLigth.protocol = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_h5_ip") {
                this.visibleLigth.H5_ip = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_h5_token") {
                this.visibleLigth.token = response.list[i].value;
              }
              if (response.list[i].name === "visible_light_h5_session") {
                this.visibleLigth.session = response.list[i].value;
              }
              if (response.list[i].name === "kurento_wsuri") {
                this.kurento.wsuri = response.list[i].value;
              }
              if (response.list[i].name === "kurento_rtsp") {
                this.kurento.rtsp = response.list[i].value;
              }
              if (response.list[i].name === "webrtc_address") {
                this.webrtcAddress = response.list[i].value;
              }
              if (response.list[i].name === "rtsp_address") {
                this.rtspAddress = response.list[i].value;
              }
              if (response.list[i].name === "roslibjs_ip") {
                this.visibleLigth.roslibjs_ip = response.list[i].value;
              }
              if (response.list[i].name === "roslibjs_port") {
                this.visibleLigth.roslibjs_port = response.list[i].value;
              }
            }
          }
        })
        .catch(() => {});
    },
    saveVisibleLigthParams() {
      var parm = {
        robotId: this.robot_id,
        type: 3,
        robotParamRequests: [
          {
            displayName: "可见光ip地址",
            name: "visible_light_ip",
            value: this.visibleLigth.ip
          },
          {
            displayName: "可见光 端口",
            name: "visible_light_port",
            value: this.visibleLigth.port
          },
          {
            displayName: "可见光密码",
            name: "visible_light_account",
            value: this.visibleLigth.account
          },
          {
            displayName: "可见光密码",
            name: "visible_light_password",
            value: this.visibleLigth.password
          },
          {
            displayName: "可见光H5protocol",
            name: "visible_light_h5_protocol",
            value: this.visibleLigth.protocol
          },
          {
            displayName: "可见光H5ip地址",
            name: "visible_light_h5_ip",
            value: this.visibleLigth.H5_ip
          },
          {
            displayName: "可见光H5token",
            name: "visible_light_h5_token",
            value: this.visibleLigth.token
          },
          {
            displayName: "可见光H5session",
            name: "visible_light_h5_session",
            value: this.visibleLigth.session
          },
          {
            displayName: "kurento-wsuri",
            name: "kurento_wsuri",
            value: this.kurento.wsuri
          },
          {
            displayName: "kurento-rtsp",
            name: "kurento_rtsp",
            value: this.kurento.rtsp
          },
          {
            displayName: "webrtcAddress",
            name: "webrtc_address",
            value: this.webrtcAddress
          },
          {
            displayName: "rtspAddress",
            name: "rtsp_address",
            value: this.rtspAddress
          },
          {
            displayName: "Roslibjs ip地址",
            name: "roslibjs_ip",
            value: this.visibleLigth.roslibjs_ip
          },
          {
            displayName: "Roslibjs 端口",
            name: "roslibjs_port",
            value: this.visibleLigth.roslibjs_port
          }
        ]
      };
      this.put_robotParamsBatch(parm, "远程访问设置");
    },
    saveLocationParams() {
      var parm = {
        robotId: this.robot_id,
        type: 4,
        robotParamRequests: [
          {
            displayName: "装载点x坐标",
            name: "charge_house_x",
            value: this.systemPoint.home_x
          },
          {
            displayName: "装载点y坐标",
            name: "charge_house_y",
            value: this.systemPoint.home_y
          },
          {
            displayName: "装载点z坐标",
            name: "charge_house_z",
            value: this.systemPoint.home_z
          },
          {
            displayName: "返回点x坐标",
            name: "back_point_x",
            value: this.systemPoint.back_x
          },
          {
            displayName: "返回点y坐标",
            name: "back_point_y",
            value: this.systemPoint.back_y
          },
          {
            displayName: "返回点z坐标",
            name: "back_point_z",
            value: this.systemPoint.back_z
          }
        ]
      };
      this.put_robotParamsBatch(parm, "坐标设置");
    },
    put_robotParamsBatch(parm, message) {
      robotParamsBatch(parm)
        .then(response => {
          this.setOperationLogs("修改-软件设置-" + message);
          this.tabClick();
          this.$message({
            message: "保存成功!",
            type: "success"
          });
          // if (parm.type == 4) {
          //   this.chargeHouseAndBackPointPub({
          //     robotId: parseInt(this.robot_id),
          //     start_x: parseFloat(this.systemPoint.home_x),
          //     start_y: parseFloat(this.systemPoint.home_y),
          //     start_z: parseFloat(this.systemPoint.home_z),
          //     back_x: parseFloat(this.systemPoint.back_x),
          //     back_y: parseFloat(this.systemPoint.back_y),
          //     back_z: parseFloat(this.systemPoint.back_z)
          //   });
          // }
        })
        .catch(() => {
          this.$message.error("修改信息失败");
        });
    },
    get_systemSettings() {
      systemSettings()
        .then(response => {
          if (response) {
            response.list.forEach(item => {
              if (item.name === "logo") {
                this.systemForm.imageUrl = item.value;
              }
              if (item.name === "company_name") {
                this.systemForm.name = item.value;
              }
              if (item.name === "company_area") {
                this.systemForm.area = item.value;
              }
            });
          }
        })
        .catch(() => {});
    },
    put_systemSettingsBatch() {
      var parm = {
        systemSettingRequests: [
          {
            displayName: "logo图标",
            name: "logo",
            value: this.systemForm.imageUrl
          },
          {
            displayName: "企业名称",
            name: "company_name",
            value: this.systemForm.name
          },
          {
            displayName: "企业区域",
            name: "company_area",
            value: this.systemForm.area
          }
        ]
      };
      systemSettingsBatch(parm)
        .then(response => {
          this.setOperationLogs("修改-软件设置-系统名称");
          this.get_systemSettings();
          this.$message({
            message: "保存成功!",
            type: "success"
          });
        })
        .catch(() => {
          this.$message.error("修改信息失败");
        });
    },
    tabClick(node) {
      if (this.editableTabsValue === "third") {
        this.getRobotParams(3);
      } else if (this.editableTabsValue === "fourthly") {
        this.getRobotParams(4);
      }
    },
    uploadImageFail() {
      this.$message.error("上传图片失败");
    },
    saveLogoAndSysName() {
      this.$refs["systemForm"].validate(valid => {
        if (valid) {
          this.put_systemSettingsBatch();
        }
      });
    },
    handleAvatarSuccess(res, file) {
      if (res.code === 1 && res.data) {
        this.systemForm.imageUrl = res.data.localUrl;
      }
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    }
  }
};
</script>

<style>
.SoftwareSettings {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  background-color: aliceblue;
}

.SoftwareSettings .el-tabs-redefine {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
}

.SoftwareSettings .el-tabs__header {
  margin-right: 0px !important;
  box-sizing: border-box;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}

.SoftwareSettings .el-tabs--border-card > .el-tabs__content {
  flex-grow: 1;
  padding: 20px 20px;
}

.SoftwareSettings .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  height: 36px;
  margin: 8px 0px 8px 0px;
  line-height: 36px;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 4px 0 0 4px;
  color: #000;
}

.SoftwareSettings
  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item.is-active {
  color: rgb(16, 156, 180);
  border: 1px solid rgb(16, 156, 180);
  border-right: none;
}

.SoftwareSettings .el-tab-pane {
  width: 100%;
  height: 100%;
}

.SoftwareSettings .card-item {
  width: 500px;
  height: auto;
}

.SoftwareSettings .card-content {
  width: 100%;
  height: auto;
  padding: 6px 18px;
  border: 0.5px solid rgb(16, 156, 180);
}

.SoftwareSettings .content-row {
  width: 100%;
  height: auto;
}

.SoftwareSettings .content-item-title,
.SoftwareSettings .content-item-text {
  display: inline-block;
  width: auto;
  height: 33px;
  line-height: 33px;
  font-size: 13px;
  color: rgb(88, 88, 88);
}

.SoftwareSettings .content-item-icon {
  display: inline-block;
  width: auto;
  height: 33px;
  line-height: 33px;
  font-size: 13px;
  color: rgb(255, 0, 0);
}

.SoftwareSettings .el-form-item .el-form-item__label {
  font-weight: normal;
  font-size: 13px;
  color: rgb(16, 156, 180);
}

.SoftwareSettings .el-input {
  width: 270px;
}

.SoftwareSettings .operation {
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
}

.SoftwareSettings .avatar-uploader {
  float: left;
  margin-right: 6px;
}
.SoftwareSettings .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.SoftwareSettings .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.SoftwareSettings .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.SoftwareSettings .avatar {
  width: 100%;
  height: 100%;
  display: block;
}
</style>